<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body {
      width: 100%;
      height: 100vh;
      background-color: black;
    }
    .cls-l {
      stroke: #fff;
      stroke-width: 2px;
    }
    main {
      width: 80%;
      height: 80%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #logo {
      width: 100%;
      height: 100%;
      animation: text-fill-anim .5s ease forwards 2.6s;
    }

    #p1 {
      stroke-dasharray: 5101.45166015625;
      stroke-dashoffset: 5101.45166015625;
      animation: text-anim 2s ease forwards;
    }
    #p2 {
      stroke-dasharray: 5544.14306640625;
      stroke-dashoffset: 5544.14306640625;
      animation: text-anim 2s ease forwards .2s;
    }
    #p3 {
      stroke-dasharray: 6116.68798828125;
      stroke-dashoffset: 6116.68798828125;
      animation: text-anim 2s ease forwards .4s;
    }
    #p4 {
      stroke-dasharray: 6300.078125;
      stroke-dashoffset: 6300.078125;
      animation: text-anim 2s ease forwards .6s;
    }
    @keyframes text-anim {
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes text-fill-anim {
      to {
        fill: white;
      }
    }
  </style>
</head>
<body>
  <main>
    <svg id="logo" class="logo cls-l" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2439" >
      <!-- <path id="p1" d="M960 256a64 64 0 0 1-64-64V128H576v768h128a64 64 0 0 1 0 128H320a64 64 0 0 1 0-128h128V128H128v64a64 64 0 0 1-128 0V64a64 64 0 0 1 64-64h896a64 64 0 0 1 64 64v128a64 64 0 0 1-64 64z" p-id="2440"></path>

      <path id="p2" d="M484.053333 789.333333l-55.018666-159.573333H199.893333L144.448 789.333333H48.64L265.706667 188.074667h100.416L583.210667 789.333333h-99.178667z m-172.928-492.074666l-87.509333 254.165333h181.674667l-87.082667-254.165333h-7.082667z m466.922667 424.149333c67.498667 0 117.504-42.901333 117.504-99.157333v-37.909334l-110.848 7.082667c-62.506667 4.16-90.837333 25.408-90.837333 65.408 0 40.832 35.413333 64.576 84.181333 64.576z m-22.933333 75.434667c-87.488 0-151.253333-52.906667-151.253334-135.850667 0-81.664 60.842667-128.746667 168.746667-135.402667l122.944-7.082666v-39.168c0-47.914667-31.68-75.008-92.928-75.008-50.005333 0-84.586667 18.346667-94.592 50.410666h-86.656c9.173333-77.909333 82.496-127.914667 185.408-127.914666 113.749333 0 177.92 56.682667 177.92 152.512V789.333333h-86.250667v-63.744h-7.082666c-27.093333 45.418667-76.672 71.253333-136.256 71.253334z" p-id="2848"></path>

      <path id="p3" d="M324.004571 749.44h278.729143c17.097143 0 27.830857-10.733714 27.830857-26.843429 0-16.091429-10.733714-27.172571-27.830857-27.172571H379.355429v-1.664l131.145142-128.457143c79.488-77.494857 103.314286-117.741714 103.314286-169.051428 0-77.147429-68.096-135.844571-158.994286-135.844572-71.442286 0-132.498286 38.912-152.96 97.938286-3.675429 11.062857-5.686857 20.790857-5.686857 29.184 0 16.768 10.057143 27.830857 26.496 27.830857 15.762286 0 22.473143-7.369143 27.501715-24.137143 2.688-10.404571 6.363429-20.114286 11.739428-28.525714 17.773714-30.171429 50.980571-48.969143 92.891429-48.969143 54.345143 0 97.609143 38.253714 97.609143 85.869714 0 38.582857-15.762286 64.402286-82.176 130.139429l-156.964572 156.982857c-14.08 13.750857-18.450286 22.454857-18.450286 34.541714 0 17.444571 11.410286 28.16 29.184 28.16z m523.574858 7.369143c102.637714 0 176.420571-60.032 176.420571-141.878857 0-66.413714-47.616-110.006857-124.105143-115.035429v-1.353143c63.725714-10.733714 103.314286-53.321143 103.314286-113.024 0-72.448-65.737143-125.110857-157.312-125.110857-68.754286 0-124.763429 30.537143-148.571429 80.493714a76.928 76.928 0 0 0-9.069714 36.900572c0 15.762286 10.733714 26.496 26.148571 26.496 15.104 0 22.162286-6.363429 27.190858-21.796572 14.409143-43.940571 51.309714-69.101714 102.290285-69.101714 60.050286 0 98.614857 31.524571 98.614857 79.835429 0 50.304-41.252571 83.510857-101.302857 83.510857h-36.882285c-15.762286 0-26.514286 9.728-26.514286 25.161143 0 15.085714 10.752 25.142857 26.514286 25.142857h37.558857c74.459429 0 118.729143 31.542857 118.729143 87.552 0 51.657143-46.262857 87.881143-112.694858 87.881143-57.691429 0-99.273143-25.490286-114.377142-69.778286-5.028571-14.409143-13.403429-21.12-27.501715-21.12-17.444571 0-28.836571 11.062857-28.836571 28.507429 0 11.739429 3.017143 22.473143 9.380571 34.194285 27.849143 53.010286 86.198857 82.523429 161.005715 82.523429z m-676.516572-0.658286c18.450286 0 30.848-12.068571 30.848-30.537143V296.96c0-21.796571-13.750857-33.865143-34.870857-33.865143-15.104 0-23.826286 4.699429-37.906286 13.750857L17.444571 349.293714C4.352 358.016 0 365.714286 0 376.795429c0 13.750857 10.057143 23.808 25.161143 23.808 8.722286 0 13.074286-2.669714 19.456-6.710858l95.250286-60.032h1.334857v391.753143c0 18.468571 11.410286 30.537143 29.860571 30.537143z" p-id="10303"></path> -->

      <path id="p4" d="M382.884571 750.208c15.872 0 27.428571-10.916571 27.428572-27.776v-47.616h1.334857c21.156571 46.628571 64.475429 75.721143 119.369143 75.721143 90.258286 0 149.449143-71.753143 149.449143-182.509714 0-110.774857-59.52-182.528-148.790857-182.528-53.906286 0-97.536 29.44-118.034286 75.392h-1.645714v-168.96c0-17.846857-11.264-29.44-27.794286-29.44s-27.776 11.593143-27.776 29.44v430.500571c0 17.188571 10.587429 27.776 26.459428 27.776z m498.614858 0.329143c65.133714 0 120.685714-35.712 139.52-86.308572 1.993143-5.613714 2.980571-10.898286 2.980571-15.542857 0-14.208-9.910857-24.137143-23.808-24.137143-12.562286 0-19.181714 4.973714-26.459429 19.510858-17.517714 37.705143-47.268571 58.203429-91.904 58.203428-64.475429 0-106.788571-51.254857-106.788571-133.906286 0-82.011429 42.313143-134.582857 106.788571-134.582857 42.642286 0 73.398857 20.169143 91.245715 58.861715 6.948571 13.897143 13.568 18.834286 25.782857 18.834285 14.226286 0 24.137143-9.252571 24.137143-23.789714 0-3.968-0.969143-8.923429-2.304-13.238857-16.530286-50.578286-73.069714-88.941714-140.196572-88.941714-98.523429 0-162.669714 72.411429-162.669714 183.186285 0 111.414857 64.804571 181.851429 163.657143 181.851429z m-763.465143-0.329143c50.267429 0 97.865143-27.428571 117.705143-69.76h1.005714v42.971429c0.658286 16.201143 11.574857 27.117714 27.099428 27.117714 15.872 0 26.788571-10.916571 26.788572-28.434286V503.222857c0-71.424-52.242286-117.394286-135.570286-117.394286-61.805714 0-113.078857 27.117714-132.242286 69.12-3.657143 8.265143-5.961143 16.201143-5.961142 23.131429 0 14.555429 10.587429 23.808 25.124571 23.808 10.24 0 17.865143-3.638857 23.149714-12.891429 17.865143-38.034286 45.970286-55.552 88.612572-55.552 50.925714 0 81.005714 28.434286 81.005714 74.404572v27.776l-105.472 5.942857C46.281143 547.181714 0 584.539429 0 645.394286c0 63.140571 48.274286 104.813714 118.034286 104.813714z m400.420571-47.945143c-62.171429 0-106.477714-53.229714-106.477714-133.906286 0-81.005714 44.306286-134.235429 106.477714-134.235428 64.128 0 104.466286 51.894857 104.466286 133.906286 0 82.651429-40.338286 134.235429-104.466286 134.235428z m-387.2 1.974857c-44.288 0-74.057143-24.137143-74.057143-59.830857 0-34.724571 27.794286-57.545143 79.030857-61.184l98.523429-6.272v34.377143c0 52.242286-45.952 92.909714-103.497143 92.909714z" p-id="10450"></path>
    </svg>
  </main>
  <script>
    const paths = document.querySelectorAll("#logo path");
    for(let i=0;i<paths.length;i++) {
      console.log(paths[i].getAttribute("id") + '=>' + paths[i].getTotalLength())
      // SVGPathElement.getTotalLength() 该方法返回用户代理对路径总长度(以用户单位为单位)的计算值。
    }
  </script>
</body>
</html>